<template>
  <view class="wrap">
    <view class="backImage">
      <image src="../../static/interImage.png" mode="widthFix" class="img"></image>
    </view>
    <view class="header">
      <uv-navbar :fixed="false" title="我的积分" autoBack safeAreaInsetTop placeholder :border='false' bg-color="rgba(0,0,0,0)" titleStyle='color: #FFFFFF' leftIconColor='#FFFFFF'></uv-navbar>
      <view class="bord">
        <view class="gost">
          <view class="title">当前积分</view>
          <view class="number">{{ userInfo.score }}</view>
        </view>
      </view>
    </view>
    <view class="scroll" v-if="pageShow">
      <view class="box">
        <scroll-view scroll-y="true" :style="`height: ${height}px`" @scrolltolower='scrolltolower'>
          <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
              <view class="left">{{ typeList[item.type] }}</view>
              <view class="right">{{ item.change_type == 1 ? '+' : '-' }}{{ item.score }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { post } from '@/api';
import { useUser } from '@/store';

const { ctx } = getCurrentInstance();
const userInfo = computed(() => {
  const store = useUser();
  return store.userInfo;
});
const typeList = {
  1: "每周首次分享社群",2: "每周首次分享主题",3: "每周阅读主题",4: "邀请新成员加入",5: "被设置为精华主题",6: "回答问题",7: "提出问题被回答",8: "主题获得打赏",9: "回答获得打赏",10: "发布主题",11: "主题获得点赞",12: "主题评论获得点赞",13: "主题获得评论",14: "主题评论获得评论",15: "发布评论",16: "点赞主题",17: "点赞主题评论",18: "每日登录APP",19: "每周阅读动态",20: "购买动态",21: "评论动态",22: "动态发布评论",23: "动态点赞",24: "动态评论点赞",25: "购买课程",26: "观看课程",27: "购买直播",28: "购买直播"
}
let height = ref(0);
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 20;
let pageShow = ref(false);


onLoad(() => {
  getList('frist');
})
function scrolltolower() {
  if(last_page < page || last_page == page) return;
  page++
  getList();
}

function getList(value){
  const params = {
    page,
    limit,
  }
  post('api/user/userScoreLogList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      
      if(value == 'frist') getElement();
    }
  })
}
function getElement(){
  const sys = uni.$uv.sys();
  const win = sys.windowHeight;
  ctx.$uv.getRect('.header').then(res=>{
    height.value = win - res.height - 50;
    pageShow.value = true;
  })
}
</script>

<style lang="scss" scoped>
  .scroll{
    padding: 0 30rpx;
    position: relative;
    z-index: 2;
    .box{
      background-color: #fff;
      border-radius: 18rpx;
      overflow: hidden;
      .list{
        padding: 0 30rpx;
        padding-top: 60rpx;
        .item{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 60rpx;
        }
      }
    }
  }
  .header{
    position: relative;
    z-index: 2;
    .bord{
      padding: 0 30rpx;
      padding-top: 20rpx;
      padding-bottom: 40rpx;
      .gost{
        width: 100%;
        border-radius: 18rpx;
        overflow: hidden;
        .number{
          font-size: 60rpx;
          color: #E43222;
          height: 143rpx;
          line-height: 143rpx;
          text-align: center;
          background-color: #fff;
        }
        .title{
          height: 80rpx;
          line-height: 80rpx;
          background: #E43222;
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }
  }
  .backImage{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F0F0F0;
  }
</style>